<template>
	<div class="gnatt-bar bar" :class="'gant-status'+row.status" :style="styles">
		<div class="process barProcess" :style="{'width': row.progress*100 + '%'}"></div>
		<div class="text">{{row.progress*100 + '%'}}</div>
	</div>
</template>
<script setup>
	import {
		ref,
		onMounted,
		watch,
		nextTick
	} from "vue";
	import {
		dayjs
	} from 'element-plus'

	const props = defineProps({
		row: Object,
		data: Object,
		tableref: Object,
		cellIndex: Number,
		dateType: String
	});

	const styles = ref({})

	function barStyle() {
		return {
			width: props.data.barWidth + 'px',
			height: props.row?.plan_start_date ? '35%' : '60%',
			top: props.row?.plan_start_date ? '55%' : '20%'
		}
	}

	// 计算两列之间的距离 设置为bar 长度
	function getBarWitch() {
		console.log(props.tableref)
		let barWidth = 0
		const cssStartIndex = props.cellIndex + 1

		let cssEndIndex = null,
			startCol = props.tableref.$el.querySelector(`.el-table__row .el-table__cell:nth-child(${cssStartIndex})`),
			endCol = null
		if (props.dateType == 'date') {
			let duration = dayjs(props.row.end_date).diff(dayjs(props.row.start_date), 'day')
			cssEndIndex = cssStartIndex + duration
			console.log(77)
		}
		if (props.dateType == 'month') {
			// 根据开始 日期和结束日期，计算这之间有多少个月份，
			let endDate = props.row.end_date ? dayjs(props.row.end_date).format('YYYY-MM-DD') : dayjs(new Date()).format(
				'YYYY-MM-DD')

			let months = 0
			let start = dayjs(props.row.start_date)
			while (start.isBefore(endDate)) {
				months++
				start = start.add(1, 'month')
			}
			cssEndIndex = cssStartIndex + months


		}
		if (props.dateType == 'year') {
			let endDate = props.row.end_date ? dayjs(props.row.end_date) : dayjs(new Date())


			let startDate = dayjs(props.row.start_date)

			let year = endDate.diff(startDate, 'year')

			cssEndIndex = cssStartIndex + year
		}

		endCol = props.tableref.$el.querySelector(`.el-table__row .el-table__cell:nth-child(${cssEndIndex})`)
		console.log(endCol)
		if (startCol && endCol) {
			const c1 = startCol.getBoundingClientRect()
			const c2 = endCol.getBoundingClientRect()
			barWidth = c2.right - c1.left
		}

		styles.value = {
			width: barWidth + 'px',
			height: props.row?.plan_start_date ? '35%' : '60%',
			top: props.row?.plan_start_date ? '55%' : '20%'
		}
	}


	watch(() => props.dateType, (n, o) => {

		getBarWitch()
	})
	onMounted(() => {
		getBarWitch()
		// nextTick(()=>{
		// 	console.log(99999)
		// 	getBarWitch()
		// })
	})
</script>
<style scoped>
	.gnatt-bar {
		position: absolute;
		height: 28px;
		left: 0;
		top: 14px;
		background: #49cb9c61;
		overflow: hidden;
		font-size: 0;
		z-index: 1;
		border-radius: 2px;
	}

	.text {
		position: absolute;
		z-index: 2;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		color: white;
		font-size: 12px;
		display: grid;
		align-content: center;
		text-align: center;
		background: none;
	}

	.process {
		display: inline-block;
		height: 100%;
		background: #49cb9c;
		/* width: 0;
	 transition: all 300ms; */
	}
</style>